<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-icon.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-revise.css"/>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="../ext/ext-revise.js"></script>
<script type="text/javascript" src="../ext/src/locale/ext-lang-zh_CN.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.Prefix = "$_";

Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = "side";

/*---------------*/
// 功能模块逻辑处理
/*---------------*/
var required = "<span style='color:red'>*</span>";

var $_StartIndex = 0;
var $_LoadMask = new Ext.LoadMask(Ext.getBody(), { msg: "正在处理，请稍候..." });

var $_SearchForm = new Ext.form.FormPanel({
    baseCls: "x-plain",
    border: false,
    items: [{
        xtype: "fieldset",
        title: "检 索",
        layout: "table",
        style: "margin:0;padding:0 0 0 10px",
        layoutConfig: {
            columns: 3
        },
        defaults: {
            baseCls: "x-plain",
            xtype: "panel",
            labelAlign: "right",
            bodyStyle: "margin-top:1px",
            layout: "form",
            labelWidth: 70,
            labelSeparator: ":&nbsp;",
            defaults: {
                xtype: "textfield",
                width: 100
            }
        },
        items: [{
            labelWidth: 40,
            items: [{
                fieldLabel: "姓名",
                name: "name"
            }]
        }, {
            items: [{
                xtype: "datefield",
                fieldLabel: "出生日期",
                name: "birthday",
                format: "Y-m-d"
            }]
        }, {
            style: "margin-left:10px",
            baseCls: "x-plain",
            items: [{
                xtype: "button",
                text: "检 索",
                width: 65,
                iconCls: "Search",
                handler: function() {$_RefreshSearchRecord();}
            }]
        }, {
            labelWidth: 40,
            items: [{
                xtype: "combo",
                fieldLabel: "性别",
                name: "sex",
                store: new Ext.data.SimpleStore({
                    fields: ["value", "text"],
                    data: [["0", "男"], ["1", "女"]]
                }),
                mode: "local",
                editable: false,
                valueField: "value",
                displayField: "text",
                triggerAction: "all",
                selectOnFocus: true
            }]
        }, {
            items: [{
                xtype: "textfield",
                fieldLabel: "电子邮箱",
                name: "email"
            }]
        }, {
            style: "margin-left:10px",
            baseCls: "x-plain",
            items: [{
                xtype: "button",
                text: "重 置",
                width: 65,
                iconCls: "Reload",
                handler: function() {$_SearchForm.getForm().reset();}
            }]
        }]
    }]
});

var $_RecordSM = new Ext.grid.CheckboxSelectionModel({
    handleMouseDown: Ext.emptyFn
});
var $_RecordCM = new Ext.grid.ColumnModel([
    $_RecordSM,
    new Ext.grid.RowNumberer({header:"序号", width: 35, renderer: function(value, metadata, record, rowIndex) {
      	return $_StartIndex + 1 + rowIndex;
    }}),
    {header: "编号", dataIndex: "id", width: 150},
    {header: "姓名", dataIndex: "name", width: 100},
    {header: "性别", dataIndex: "sex", width: 60, renderer: function(value) {
        return (value == "0" ? "男" : "女");
    }},
    {header: "出生日期", dataIndex: "birthday", width: 80},
    {header: "电子邮件", dataIndex: "email", width: 200},
    {header: "兴趣爱好", dataIndex: "hobby", width: 300}
]);
var $_DataStore = new Ext.data.SimpleStore({
    fields: ["id", "name", "sex", "birthday", "email", "hobby"],
    data: [
        ["NO2014123010000004", "张三", "0", "1990-05-06", "zhangsan@sina.com.cn", ""],
        ["NO2014123010000005", "李四", "0", "1990-07-08", "lisi@sina.com.cn", ""],
        ["NO2014123010000006", "王五", "0", "1990-10-10", "wangwu@sina.com.cn", ""]
    ]
});
var $_RecordStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: "",
        method: "POST"
    }),
    reader: new Ext.data.JsonReader({
        totalProperty: "total",
        root: "record"
    }, [
        {name: "id"},
        {name: "name"},
        {name: "sex"},
        {name: "birthday"},
        {name: "email"},
        {name: "hobby"}
    ])
});
var $_RecordGrid = new Ext.grid.GridPanel({
	autoHeight: true,
    store: $_DataStore,
    cm: $_RecordCM,
    sm: $_RecordSM,
    columnLines: true,
    viewConfig: {
        forceFit: true
    },
    loadMask: new Ext.LoadMask(Ext.getBody(), {msg: "正在检索..."}),
    tbar: [{xtype: "tbtext", text: "检索结果"}],
    bbar: new Ext.PagingToolbar({
        store: [[]],
        pageSize: 20,
        displayInfo: true,
        displayMsg: "显示第{0}条到{1}条记录  共{2}条",
        emptyMsg: "没有记录",
        doLoad: function(start) {
        	$_StartIndex = start;
        	var params = {}, pn = this.getParams();
        	params[pn.start] = start;
        	params[pn.limit] = this.pageSize;
        	this.store.load({params: params});
        },
        items: ["-", {
            xtype: "button",
            text: "新 增",
            width: 50,
            handler: function() {$_RecordActionDialog("add");}
        }, " ", {
            xtype: "button",
            text: "更 新",
            width: 50,
            handler: function() {$_RecordActionDialog("update");}
        }, " ", {
            xtype: "button",
            text: "删 除",
            width: 50,
            handler: function() {
                var sm = $_RecordGrid.getSelectionModel();
                if (sm.getCount() <= 0) {
                    Ext.Msg.alert("提示信息", "请您选择需要删除的记录！");
                    return;
                }

            	Ext.Msg.confirm("提示信息", "您确定要删除您选择的记录吗？", function(btn) {
            		if (btn == "yes") {
                        var record = sm.getSelections();
                        var ids = new Array();
                        for (var i = 0; i < record.length; i++) {
                            ids.push(record[i].data["id"]);
                        }
                        
                        $_LoadMask.show();
                        Ext.Ajax.request({
                            url: "",
                            params: {"id": Ext.encode(ids)},
                            method: "POST",
                            success: function(json) {
                                $_LoadMask.hide();
                                var response = Ext.decode(json.responseText);
                                if (response.success) {
                                    Ext.Msg.alert("删除信息", "删除记录成功！");
                                    $_RefreshSearchRecord();
                                } else {
                                    Ext.Msg.alert("删除信息", "删除记录失败！");
                                }
                            },
                            failure: function(html) {
                                $_LoadMask.hide();
                                Ext.Msg.alert("删除信息", "系统异常错误！");
                            }
                        });
            		}
            	});
            }
        }]
    }),
    listeners: {
    	'rowdblclick' : function(grid, rowIndex, e) {
    		$_RecordActionDialog("detail", rowIndex);
    	}
    }
});

var $_RecordForm = new Ext.form.FormPanel({
    bodyStyle: "padding:5px",
    baseCls: "x-plain",
    layout: "table",
    layoutConfig: {
        columns: 2
    },
    defaults: {
        baseCls: "x-plain",
        xtype: "panel",
        labelAlign: "right",
        bodyStyle: "margin-top:1px",
        layout: "form",
        labelWidth: 80,
        labelSeparator: ":&nbsp;&nbsp;",
        defaults: {
            xtype: "textfield",
            width: 140
        }
    },
    items: [{
        items: [{
            fieldLabel: "编号",
            name: "id",
            disabled: true
        }]
    }, {
        items: [{
            fieldLabel: "姓名",
            name: "name",
            allowBlank: false,
            labelSeparator: ":" + required
        }]
    }, {
        items: [{
            xtype: "combo",
            fieldLabel: "性别",
            name: "sex",
            store: new Ext.data.SimpleStore({
                fields: ["value", "text"],
                data: [["0", "男"], ["1", "女"]]
            }),
            mode: "local",
            editable: false,
            valueField: "value",
            displayField: "text",
            triggerAction: "all",
            selectOnFocus: true,
            allowBlank: false,
            labelSeparator: ":" + required
        }]
    }, {
        items: [{
            xtype: "datefield",
            fieldLabel: "出生日期",
            name: "birthday",
            format: "Y-m-d",
            allowBlank: false,
            labelSeparator: ":" + required
        }]
    }, {
        colspan: 2,
        items: [{
            fieldLabel: "电子邮件",
            name: "email",
            vtype: "email",
            width: 365,
            allowBlank: false,
            labelSeparator: ":" + required
        }]
    }, {
        colspan: 2,
        items: [{
            xtype: "textarea",
            fieldLabel: "兴趣爱好",
            name: "hobby",
            width: 365
        }]
    }]
});

var $_RecordDialog = new Ext.Window({
    title: "详细信息",
    resizable: false,
    width: 475,
    buttonAlign: "right",
    autoHeight: true,
    modal: true,
    closeAction: "hide",
    defaults: {
        baseCls: "x-plain"
    },
    items: [$_RecordForm],
    buttons: [{
        text: "保存",
        handler : function() {}
    }, {
        text: "关闭",
        handler: function() {$_RecordDialog.hide();}
    }]
});

/*----------------------*/
// 新增/更新/查看记录对话框
/*----------------------*/
function $_RecordActionDialog(action, rowIndex) {
    switch (action) {
        case "add":
            $_RecordDialog.buttons[0].handler = function() {$_AddOrUpdateRecord("add");};
            $_RecordDialog.buttons[0].show();
            $_RecordDialog.setTitle("新增信息");
            $_RecordDialog.show();
            $_RecordForm.getForm().reset();
            $_DisableDialogItems($_RecordForm, false, ["id"]);
            break;
        case "update":
            var sm = $_RecordGrid.getSelectionModel();
            if (sm.getCount() != 1) {
                Ext.Msg.alert("提示信息", "请您选择一条需要修改的记录！");
                return;
            }
            var record = sm.getSelected();
            $_RecordDialog.buttons[0].handler = function() {$_AddOrUpdateRecord("update");};
            $_RecordDialog.buttons[0].show();
            $_RecordDialog.setTitle("修改信息");
            $_RecordDialog.show();
            $_RecordForm.getForm().reset();
            $_RecordForm.getForm().loadRecord(record);
            $_DisableDialogItems($_RecordForm, false, ["id"]);
            break;
        case "detail":
            var record = $_DataStore.getAt(rowIndex);
            $_RecordDialog.buttons[0].hide();
            $_RecordDialog.setTitle("详细信息");
            $_RecordDialog.show();
            $_RecordForm.getForm().reset();
            $_RecordForm.getForm().loadRecord(record);
            $_RecordForm.getForm().clearInvalid();
            $_DisableDialogItems($_RecordForm, true, ["id"]);
            break;
        default: break;
    }
}

function $_DisableDialogItems(form, disabled, filters) {
	if (form) {
		if (form.items && form.items.length > 0) {
			Ext.each(form.items.items, function(item) {
	            $_DisableDialogItems(item, disabled, filters);
			});
		} else {
			if (form.xtype == "hidden") {
				return;
			}
		    if (Ext.isArray(filters) && filters.indexOf(form.name) > -1) {
		    	return;
		    }
		    
		    if (Ext.isDefined(form.setDisabled)) {
                form.setDisabled(disabled);
		    } else {
                form.getEl().dom.disabled = disabled;
		    }
		}
	}
}

function $_AddOrUpdateRecord(action) {
    if (!$_RecordForm.getForm().isValid()) {
        return;
    }
    
    var postUrl = null, message = null;
    if (action == "add") {
        postUrl = "method=add";
        message = {title: "新增信息", success: "新增信息成功！", error: "新增信息失败！"};
    } else if (action == "update") {
        postUrl = "method=update";
        message = {title: "更新信息", success: "更新信息成功！", error: "更新信息失败！"};
    }
    var params = $_RecordForm.getForm().getValues();
    
    $_RecordDialog.hide();
    $_LoadMask.show();
    Ext.Ajax.request({
        url: postUrl,
        params: params,
        method: "POST",
        success: function(json) {
            $_LoadMask.hide();
            var response = Ext.decode(json.responseText);
            if (response.success) {
                Ext.Msg.alert(message.title, message.success);
                $_RefreshSearchRecord();
            } else {
                Ext.Msg.alert(message.title, message.error);
            }
        },
        failure: function(html) {
            $_LoadMask.hide();
            Ext.Msg.alert(message.title, message.failure);
        }
    });
}

function $_RefreshSearchRecord() {
    Ext.apply($_RecordStore.baseParams, $_SearchForm.getForm().getValues());
    $_RecordStore.load({params: {start: 0, limit: 20}});
}

/*---------------*/
// 页面框架内容加载
/*---------------*/
var $_Framework = new Ext.Panel({
	//layout: "fit",
	//height: document.documentElement.clientHeight,
	items: [$_SearchForm, $_RecordGrid]
});
Ext.onReady(function() {
	$_Framework.render(Ext.getBody());
	//$_RefreshSearchRecord();
});
</script>
</body>
</html>
